<template>
	<u-popup v-model="show" mode="bottom" height="65%">
		<view class="site-header">
			<u-cell-item :arrow="false">
				<view slot="title">选择网站</view>
				<u-button size="mini" type="success" @click="handleSubmit">确定</u-button>
			</u-cell-item>
		</view>
		<view class="site-content">
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in siteList" :key="index" :options="options"
				@click="handleActionClick">
				<u-cell-item :title="item.name" :arrow="false" @click="handleItemClick(item,index)">
					<view slot="title" :id="`site_${index}`">{{ item.name }}</view>
					<text>{{ item.group }}</text>
					<view style="width:80upx;display: inline-block;">
						<u-icon name="checkbox-mark" color="#096" size="48" v-if="current == item"></u-icon>
					</view>
				</u-cell-item>
			</u-swipe-action>
			<view class="" v-if="listQuery.totalCount > siteList.length">
				<u-cell-item :arrow="false" @click="handleNextPage()">
					<view slot="title">点击加载</view>
				</u-cell-item>
			</view>
		</view>
	</u-popup>

</template>

<script>
	export default {
		data() {
			return {
				show: false,
				current: {},
				siteList: [],
				list: [],
				mescroll: {},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				listQuery: {
					totalCount: 0,
					page: 1,
					pageSize: 30
				}
			}
		},
		mounted() {
			// console.log(this.defcku.sites)
		},
		methods: {
			fetchAll() {
				if (Array.isArray(this.defcku.sites)) {
					const list = [...this.defcku.sites]
					list.sort((a, b) => a.orderNum - b.orderNum)
					this.list = list
					this.listQuery.totalCount = list.length
				}
			},
			fetchData() {
				let start = (this.listQuery.page - 1) * this.listQuery.pageSize
				let end = this.listQuery.page * this.listQuery.pageSize
				if (start == 0) {
					this.siteList = new Array()
				}
				// console.log(`start=${start},end = ${end}`)
				// console.log(this.list)
				for (let i = start; i < end && i < this.list.length; i++) {
					this.siteList.push(this.list[i])
				}
			},
			handleNextPage() {
				this.listQuery.page++
				this.fetchData()

			},
			handleItemClick(obj, index) {
				this.current = obj
			},
			handleSubmit() {
				if (this.current.key) {
					this.$emit('change', this.current)
				}
				this.show = false
			},
			handleShow(key) {
				if (this.list.length == 0) {
					this.fetchAll()
				}
				this.fetchData()
				this.show = true
				let index = this.list.findIndex(t => t.key == key)
				let site = this.list[index]
				if (site) {
					this.current = site
				}
			},
			async handleActionClick(rowIndex, actionIndex) {
				let site = this.siteList[rowIndex]
				this.$set(site, 'show', true)
				let findex = this.defcku.sites.findIndex(t => t.key == site.key)
				this.defcku.sites.splice(findex, 1)
				this.$u.vuex('defcku', this.defcku)
				this.$u.toast('删除成功')
				this.$nextTick(() => {
					this.$set(site, 'show', false)
					this.$nextTick(() => {
						this.siteList.splice(rowIndex, 1)
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.site-content {
		position: relative;
		top: 60px;
		border: 0px solid #096;
	}

	.site-header {
		position: fixed;
		background-color: #FFF;
		box-shadow: #EEE 5px 5px 3px;
		border: 1px solid #EEE;
		width: 100%;
		z-index: 10;
	}
</style>